.notifications-container {
  @notification-width: 450px;
  @notification-icon-width: 30px;
  position: fixed;
  top: 15px;
  right: 15px;
  width: @notification-width;
  z-index: 9999999;
  .notification {
    width: @notification-width;
    position: relative;
    padding: 0;
    border: none;
    margin-bottom: 20px;
    max-height: 600px;
    overflow: hidden;
    visibility: hidden;
    &.notification-show {
      visibility: visible;
      animation: notification-show 0.36s cubic-bezier(0.175, 0.885, 0.32, 1.27499);
    }
    &.notification-hide {
      animation: notification-hide 0.36s cubic-bezier(0.175, 0.885, 0.32, 1.27499);
    }
    &.notification-info {
      .icon {
        background: @theme-brand-info;
        i {
          color: darken(@theme-brand-info, 15%);
        }
      }
      .right {
        color: darken(@theme-brand-info, 15%);
        .title {
          background: lighten(@theme-brand-info, 18%);
          border-bottom-color: darken(@theme-brand-info, 10%);
        }
        .message {
          background: lighten(@theme-brand-info, 30%);
        }
      }
    }
    &.notification-warning {
      .icon {
        background: @theme-brand-warning;
        i {
          color: darken(@theme-brand-warning, 15%);
        }
      }
      .right {
        color: darken(@theme-brand-warning, 15%);
        .title {
          background: lighten(@theme-brand-warning, 18%);
          border-bottom-color: darken(@theme-brand-warning, 10%);
        }
        .message {
          background: lighten(@theme-brand-warning, 30%);
        }
      }
    }
    &.notification-error {
      .icon {
        background: @theme-brand-danger;
        i {
          color: darken(@theme-brand-danger, 15%);
        }
      }
      .right {
        color: darken(@theme-brand-danger, 15%);
        .title {
          background: lighten(@theme-brand-danger, 18%);
          border-bottom-color: darken(@theme-brand-danger, 10%);
        }
        .message {
          background: lighten(@theme-brand-danger, 30%);
        }
      }
    }
    &.notification-success {
      .icon {
        background: @theme-brand-success;
        i {
          color: darken(@theme-brand-success, 15%);
        }
      }
      .right {
        color: darken(@theme-brand-success, 15%);
        .title {
          background: lighten(@theme-brand-success, 18%);
          border-bottom-color: darken(@theme-brand-success, 10%);
        }
        .message {
          background: lighten(@theme-brand-success, 30%);
        }
      }
    }
    &.has-title {
      .right {
        .message {
          border-top-right-radius: 0;
        }
      }
    }
    .close {
      position: absolute;
      top: 13px;
      right: 13px;
      background: none;
      font-size: 14px;
      &:focus {
        outline: none;
      }
      &:active {
        box-shadow: none;
      }
    }
    .icon {
      position: absolute;
      top: 0;
      left: 0;
      width: @notification-icon-width;
      height: 100%;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      p {
        position: relative;
        top: 13px;
      }
    }
    .right {
      margin-left: @notification-icon-width;
      .title {
        border-top-right-radius: 4px;
        padding: 13px 10px 10px;
        border-bottom: 1px solid transparent;
      }
      .message {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 13px 10px 10px;
        overflow-y: auto;
        .stack {
          margin-top: 10px;
          font-size: 12px;
          .btn {
            background: none;
            padding: 0;
            border: none;
            border-radius: 0;
            font-size: 12px;
            &:focus {
              outline: none;
            }
            &:active {
              box-shadow: none;
            }
            .text {
              text-decoration: underline;
            }
          }
          .stack-message {
            margin-top: 10px;
            word-wrap: break-word;
          }
        }
      }
    }
  }
}
@-webkit-keyframes notification-show {
  0% {
    opacity: 0;
    transform: perspective(450px) translate(0, -30px) rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: perspective(450px) translate(0, 0) rotateX(0deg);
  }
}
@-webkit-keyframes notification-hide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
